@charset "utf8";
/* 页头 */
header{
	/* 页面宽度固定 */
	width: 100%;
	height: 43px;
	/* 切片：大范围 */
	background: #333;
	bor der: 1px solid red;
}
/* 切片：小范围 */
/* 中控区：决定内容显示 */
header div#wrapper{
	width: 72.5%;
	height: 43px;
	back ground: #f00;
	/*外边距居中*/
	margin: 0 auto;
}
/* 页头左侧 */
header div#wrapper div.head_left{
	width: 650px;
	height: 43px;
	backg round: #0000ff;
	float: left;
}

/*左侧内容*/
header div#wrapper div.head_left ul li{
	float: left;
	height: 43px;
}
header div#wrapper div.head_left ul li a{
	/*超链接：垂直居中、右侧竖线、间距*/
	line-height: 43px;
    border-right: 1px solid #424242;
	/*间隙:撑开-文字和竖线距离*/
	padding: 0 6px;
}
/* 找最后一个导航选项，去掉竖线 */
header div#wrapper div.head_left ul li a.c{
	border: 0;
}
header div#wrapper div.head_left ul li a:hover{
	color: #fff;
}

/*-------------------------------------------*/
/* 页头右侧 */
header div#wrapper div.head_right{
	width: 300px;
	height: 43px;
	backgro und: #55ff00;
	float: right;
}
/*右侧位：内容右浮动*/
header div#wrapper div.head_right ul li{
	float: right;
}
/*右侧位：竖线*/
header div#wrapper div.head_right ul li a{
	border-right: 1px solid #424242;
}
/*去掉竖线：购物车、注册旁边*/
header div#wrapper div.head_right ul li a.d{
	border: 0;
}
header div#wrapper div.head_right ul li a.c{
	border: 0;
}
/*找右侧，购物车，加宽，背景色*/
header div#wrapper div.head_right ul li.li_right{
	width: 120px;
	background: #424242;
}
/*加精灵图*/
header div#wrapper div.head_right ul li.li_right i.shop{
	bor der: 1px solid red;
	/*撕开口：行内元素，左右口---*/
	padding: 0 10px;
	/*图片没有导入：路径 相对定位 
	      相对于header.css找img图片
		  路径：返回上一级，在MI路径下找img---图片
	
	*/
	background: url(../img/buy.png) no-repeat center left;
	margin-left: 10px;
}
/* 背景色，先变色，然后文本再变色，同时精灵图改变 */
header div#wrapper div.head_right ul li.li_right:hover{
	background: #fff;
}
header div#wrapper div.head_right ul li.li_right:hover a{
	color: #ff6700;
}
header div#wrapper div.head_right ul li.li_right:hover i.shop{
	background: url(../img/buy01.png) no-repeat left center;
}
/* 购物筐弹出效果 */
header div#wrapper div.head_right ul li.li_right {
    position: relative; /* 设置定位上下文 */
}

header div#wrapper div.head_right ul li.li_right div.tc{
    position: absolute;
    width: 296px;
    height: 0;
    overflow: hidden;
    /* 背景 */
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    /* 定位修正 */
    right: 0; /* 右侧对齐父容器 */
    /* 过渡效果 */
    transition: height 0.5s ease;
    /* 文字样式 */
    color: #424242;
    text-align: center;
    line-height: 100px;
    z-index: 999;
}
header div#wrapper div.head_right ul li.li_right:hover .tc{
    height: 100px;
}